<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		p{
			color: #333333;
			margin: 0.3125rem;
		}
		ul{
			list-style-type:none
		}
		li{
			color: #666666;
			background-color: #f2f2f2;
			border: 0.0625rem solid #d4d4d4;
			border-radius:0.3125rem ;
			float: left;
			margin: 0.3125rem;
			padding: 0.3125rem;
		}
		input{
			margin: 0.3125rem;
		}
		button{
			width: 18.75rem;
			margin: 0.3125rem;
			padding: 0.3125rem;
			color: #333333;
			border-radius:0.3125rem ;
			background-color: #f2f2f2;
			border:0.0625rem solid #d4d4d4;
		}
		#content{
			width: 62.5rem;
			margin:3.125rem auto;
		}
		#btnlist{
			float: left;
		}
		#formlist{
			float: left;
		}
		.inner{
			border: 0.0625rem solid #d4d4d4; 
			margin: 0.3125rem;
			border-radius: 0.625rem;
			width: 31.25rem;
		}
	</style>
</head>
<body>
	<div id="content">
		<div id="formlist">
			<div class="inner">
				<p>你喜欢哪个城市</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>广州</li>
					<li>杭州</li>
				</ul>
				<br />
				<br />
				<p>你喜欢哪款游戏</p>
				<ul id="game">
					<li id="gta">gta</li>
					<li>csgo</li>
					<li>destiny2</li>
					<li>dota2</li>
				</ul>
				<br />
				<br />
				<p>你的手机操作系统是</p>
				<ul id="phone">
					<li>Ios</li>
					<li id="android">Android</li>
					<li>鸿蒙</li>
				</ul>
				<br />
				<br />
			</div>
			<br />
			<div class="inner">
				<p>gender:</p>
				<input class="test" type="radio" name="gender" value="male" />
				male
				<input type="radio" name="gender" value="female" />
				female
				<br />
				<p>name:</p>
				<input type="text" name="name" id="username" value=""/>
				<br />
				<br />
			</div>
		</div>
		
		<div id="btnlist">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">查找#city下所有子节点</button></div>
			<div><button id="btn06">查找#phone下第一个节点</button></div>
			<div><button id="btn07">返回#bj父亲节点</button></div>
			<div><button id="btn08">返回#android前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
			<div><button id="btn12">返回#android后一个兄弟节点</button></div>
		</div>
	</div>
</body>
</html>
<script>

	// 查找#bj节点	btn01📌
	// 获取 btn01 并创建单击响应函数
	var btn01 = document.getElementById("btn01");
	btn01.onclick = function(){
		var city = document.getElementById("city");
		var bj = city.getElementsByTagName("li")[0];
		alert(bj.innerHTML);
	};

	// 查找所有li节点btn02📌
	var btn02 = document.getElementById("btn02");
	btn02.onclick = function(){
		var li = document.getElementsByTagName("li");
		for(var i=0;i<li.length;i++){
			alert(li[i].innerHTML);
		}
	};
	// 查找name=gender所有节点btn03📌
	var btn03 = document.getElementById("btn03");
	btn03.onclick = function(){
		var gender = document.getElementsByName("gender");
		for(var i=0;i<gender.length;i++){
			alert(gender[i].value);
		}
	};

	// 查找#city下所有li节点btn04📌
	var btn04 = document.getElementById("btn04");
	btn04.onclick = function(){
		var city = document.getElementById("city");
		var li = city.getElementsByTagName("li");
		for(var i=0;i<li.length;i++){
			alert(li[i].innerHTML);
		}
	};

	// 查找#city下所有子节点btn05📌
	var btn05 = document.getElementById("btn05");
	btn05.onclick = function(){

		var city = document.getElementById("city");
		// var cityNodes = city.childNodes;
		// childNodes 属性会获取 "包括文本节点" 在内的所有节点 ⭐

		/*
			children 
				此属性可以获取当前元素的所有子 元素 ⭐📌
		*/
		var cityNodes = city.children;
		for(var i=0;i<cityNodes.length;i++){
			alert(cityNodes[i].innerHTML);
		}
		

	};
	
	// 查找#phone下第一个节点btn06📌
	var btn06 = document.getElementById("btn06");
	btn06.onclick = function(){
		var phone = document.getElementById("phone");
		// firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
		// var phoneNode = phone.firstChild;

		// children 获取所有子元素，把索引设置为0 就是第一个子元素
		// var phoneNode = phone.children[0];
		// firstElementChild 可以获取到当前元素的第一个子元素 ❌IE8
		var phoneNode = phone.firstElementChild;
		alert(phoneNode.innerHTML);
	};

	// 返回#bj父亲节点btn07📌
	var btn07 = document.getElementById("btn07");
	btn07.onclick = function(){
		var bj = document.getElementById("bj");
		var bjParent = bj.parentNode;
		alert(bjParent.innerText);
		/*
			innerText 	⭐⭐📌
				和innerHTML 相似，但将标签去除，只留下文本
		*/
	};

	// 返回#android前一个兄弟节点btn08📌
	var btn08 = document.getElementById("btn08");
	btn08.onclick = function(){
		var android = document.getElementById("android");
		// previousSibling 获取前一个兄弟 "节点"（含空白文本）
		// var friend = android.previousSibling;
		/*
			previousElementSibling ⭐⭐📌
				获取当前元素的前一个兄弟 "元素"  ❌ie8
		*/
		var friend = android.previousElementSibling;
		alert(friend.innerHTML);
	};

	// 返回#android后一个兄弟节点btn12📌
	var btn12 = document.getElementById("btn12");
	btn12.onclick = function(){
		var android = document.getElementById("android");
		/*
			nextElementSibling  ⭐⭐📌
				获取当前元素的后一个兄弟 "元素"  ❌ie8
		*/
		var friend = android.nextElementSibling;
		alert(friend.innerHTML);
	};

	// 返回#username的value属性值btn09📌
	var btn09 = document.getElementById("btn09");
	btn09.onclick = function(){
		var username = document.getElementById("username");
		alert(username.value);
	};

	// 设置#username的value属性值btn10📌
	var btn10 = document.getElementById("btn10");
	btn10.onclick = function(){
		var username = document.getElementById("username");
		alert(username.value="大大怪！");
	};

	// 返回#bj的文本值btn11📌
	var btn11 = document.getElementById("btn11");
	btn11.onclick = function(){
		var bj = document.getElementById("bj");
		alert(bj.innerHTML);
	};
</script>